<template>
	<view class="main">
		<iconMusic/>
		<next/>
		<view class="uni-title-one">
			{{ achivementPage.lineOne }}
		</view>
		<view class="uni-title-two">
			{{ achivementPage.lineTwo.textOne }}
			<text class="yellow">{{ data.num }}</text>
			{{ achivementPage.lineTwo.textTwo }}
			<text class="yellow">{{ data.course }}</text>
			{{ achivementPage.lineTwo.textThree}}
			<text class="yellow">{{ data.other }}</text>
			{{ achivementPage.lineTwo.textFour}}<br/>
			{{ achivementPage.lineTwo.textFive }}
			
			<view class="my-botton" @click="goto">
				<text>查看成绩</text>
				<image src="http://rjinbysql.hn-bkt.clouddn.com/static/images/right-arrowhead.png"></image>
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import { reactive } from 'vue'
	import student from '/stateData/student.js'
	const { achivementPage } = student
	const data = reactive({
		clientY:0,
		num:4.2,
		course:1,
		other:'《程序设计基础》'
	})
	const goto = () => {
		console.log("12313");
		uni.navigateTo({
			url:'/pages/student/transcriptPage/transcriptPage'
		})
		
	}
</script>

<style lang="scss" scoped>
	@import url(/static/css/style.css);
	.main{
		width: 100%;
		height: 100vh;
		background: url(http://rjinbysql.hn-bkt.clouddn.com/static/images/stbg-achievement.png)no-repeat;
		background-size: 100% 100%;
	}
	
	.my-botton{
		width: 210rpx;
		height: 68rpx;
		background: linear-gradient(180deg, rgba(239, 255, 176, 1) 0%, rgba(77, 179, 123, 1) 100%);
		border-radius: 213px;
		box-shadow: 0px 8rpx 20rpx 0px rgba(0, 0, 0, 0.2);
		font-size: 24rpx;
		font-weight: 500;
		line-height: 68rpx;
		color: rgba(56, 79, 122, 1);
		position:absolute;
		bottom: -100rpx;
		left:60rpx;
		text{
			margin:0 10rpx 0 40rpx;
		}
		image{
			width: 24rpx;
			height: 24rpx;
			margin: 10rpx 0 0 0;
			position: absolute;
			top: 12rpx;
		}
	}
	
</style>
